Skip to content

Conversation

@javiereguiluz
Copy link
Member

Without this change, I don't see any styles on the app and the server shows this:

[Application] Nov  4 14:19:23 |CRITICA| REQUES Uncaught PHP Exception 
Symfony\Component\AssetMapper\Exception\RuntimeException:
"Unable to find asset "./bootswatch/_variables" referenced in "demo/assets/styles/_variables.scss". 
The file "demo/assets/styles/bootswatch/_variables" does not exist."
at CssAssetUrlCompiler.php line 111

@stof
Copy link
Member

stof commented Nov 4, 2025

As discussed in symfony/symfony#62195, the changes done in Symfony 7.4 to support all syntaxes for CSS imports are breaking things for SassBundle which was relying on the fact that the way Sass imports are defined was not matched by the regex of CSS (which is not true anymore) and has not been adapted.

As I commented in this issue, there is a workaround for that. If you use Sass modules (i.e. using @use instead of @import in your Sass files), you won't be impacted by the issue (as this @use at-rule won't look like a CSS import at all). And at the same time, it will use the recommended Sass syntax (using @import in Sass is deprecated).
However, I'm not sure Bootswatch supports using modules yet.

@javiereguiluz
Copy link
Member Author

I tried changing our @import by @use but then I see other errors:

Error: This at-rule is not allowed here.
  ╷
9 │   @use url("#{$web-font-path}");
  │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  assets/styles/bootswatch/_bootswatch.scss 9:3  @use
  assets/styles/app.scss 4:1                     root stylesheet

In PreAssetsCompileEventListener.php line 42:

  Error compiling sass: "Error: This at-rule is not allowed here.
    ╷
  9 │   @use url("#{$web-font-path}");
    │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    assets/styles/bootswatch/_bootswatch.scss 9:3  @use
    assets/styles/app.scss 4:1                     root stylesheet
  "

Another example:

Error: Undefined variable.
   ╷
24 │     color: $dark;
   │            ^^^^^
   ╵
  assets/styles/bootswatch/_bootswatch.scss 24:12  @use
  assets/styles/app.scss 4:1                       root stylesheet

In PreAssetsCompileEventListener.php line 42:

  Error compiling sass: "Error: Undefined variable.
     ╷
  24 │     color: $dark;
     │            ^^^^^
     ╵
    assets/styles/bootswatch/_bootswatch.scss 24:12  @use
    assets/styles/app.scss 4:1                       root stylesheet
  "

So, let's merge this as a temporary fix and let's try to fix this properly in a future PR. Thanks!

@javiereguiluz javiereguiluz merged commit d3ebca2 into symfony:main Nov 24, 2025
9 checks passed
@javiereguiluz javiereguiluz deleted the fix_styles branch November 24, 2025 12:24
@stof
Copy link
Member

stof commented Nov 24, 2025

The first error you get is because this should not be migrated (as it is code generated a CSS import, not code defining a Sass import)

the second error is related to the fact that Sass modules have isolated scopes. Apparently, bootswatch has not migrated to modules yet: thomaspark/bootswatch#1325
A workaround might be to create a dedicated Sass module (referenced with @use from your main Sass file) that would keep using @import internally until bootswatch is compatible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants